import react from 'react';
import {Link } from "react-router-dom";
import styles from "./home.module.scss";  //  scss  scoped  module

 import Swiper from '../../components/swiper/swiper';
export default class App extends react.Component{
    constructor(){
        super();
        this.state= {
            menuList:[]
        }
    }
    componentDidMount(){
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/category/head').then(res=>{
            if(res.data.msg=='操作成功'){
               this.state.menuList = res.data.result;
               this.state.menuList.push({name:'品牌',id:990,children:[{name:'品牌推荐'}]});
               
               this.setState({
                    menuList:res.data.result
               })
            }
        })
    }
    render(){
        return <div className={styles.home_head}>
                <Swiper></Swiper>
                <div className={styles.home_category} >
                    <ul className={styles.menu}>
                    {this.state.menuList.map((item,index)=>{
                        return    <li key={item.id}>
                                        <Link to="'/category'">{ item.name }</Link>
                                          <div>
                                            {item.children.slice(0,2).map( (sub,index)=>{
                                                return  <Link key={index} to={`/category/${sub.id}`}>{ sub.name }</Link>
                                            })}      
                                          </div>
                                    </li>
                    })}
            
                    
                    </ul>
      
        {/* <div className="layer">
          <h4>{{tabIndex==menuList.length-1?'品牌':'分类'}}推荐 <small>根据您的购买或浏览记录推荐</small></h4>

          <ul v-if="menuList[tabIndex]&&menuList[tabIndex].goods">
      
            <li v-for="(item,index) in menuList[tabIndex].goods" :key="index">
              <RouterLink to="/">
                <img :src="item.picture" alt="">
                <div className="info">
                  <p className="name ellipsis-2">{{item.name}}</p>
                  <p className="desc ellipsis">{{item.desc}}</p>
                  <p className="price"><i>¥</i>{{item.price}}</p>
                </div>
              </RouterLink>
            </li>
          </ul>
     
          <ul v-if="tabIndex==menuList.length-1">
            <li className="brand" v-for="brand in brands" :key="brand.id">
              <RouterLink to="/">
                <img :src="brand.picture">
                <div className="info">
                  <p className="place"><i className="iconfont icon-dingwei"></i>{{brand.place}}</p>
                  <p className="name ellipsis">{{brand.name}}</p>
                  <p className="desc ellipsis-2">{{brand.desc}}</p>
                </div>
              </RouterLink>
            </li>
          </ul>
        </div> */}
      </div>
        </div>
        
    }
}